To put a list of posts on the right side, we need to do two things: update your layout to include a sidebar and use 11ty's Collections feature to fetch your posts automatically.

1. Update your Layout (The HTML/CSS)

We will use CSS Flexbox to create a two-column layout. Replace the content of your _includes/layout.njk with this:

HTML

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>{{ title }}</title>  
  <style>  
    body { font-family: sans-serif; max-width: 1000px; margin: 40px auto; padding: 0 20px; line-height: 1.6; }  
    nav { margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; }  
      
    /* The Flexbox Container */  
    .container { display: flex; gap: 40px; }  
    main { flex: 3; }      /* Content takes up 3 parts */  
    aside { flex: 1; border-left: 1px solid #eee; padding-left: 20px; } /* Sidebar takes 1 part */  
      
    .post-list { list-style: none; padding: 0; }  
    .post-list li { margin-bottom: 10px; }  
  </style>  
</head>  
<body>  
  <nav><a href="/">Home</a> | <a href="/about/">About</a></nav>

  <div class="container">  
    <main>  
      <h1>{{ title }}</h1>  
      {{ content | safe }}  
    </main>

    <aside>  
      <h3>All Posts</h3>  
      <ul class="post-list">  
        {% for post in collections.post %}  
          <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>  
        {% endfor %}  
      </ul>  
    </aside>  
  </div>  
</body>  
</html>

---

2. How 11ty knows what a "Post" is

By default, 11ty doesn't know which files are "posts" and which are "pages" (like About). The easiest way to tell 11ty is by using tags.
Update your blog post files (e.g., 2026-02-03-first-post.md) to include the post tag:

Markdown

layout: layout.njk
title: My First Blog Post
tags: post

Your content here...

Note: Your index.md and about.md should not have the post tag, otherwise they will appear in the sidebar list.

---

3. Creating a "Posts" Folder (Best Practice)

Instead of adding tags: post to every single file manually, you can create a folder called posts/ and add a "Directory Data File" to tag everything inside it automatically.

  1. Move your posts: Put your blog posts in a folder named posts.
  2. Create a JSON file: Inside that same posts/ folder, create a file named posts.json.
  3. Add this code:
   JSON  
   {  
     "tags": "post"  
   }

   *Now, any Markdown file you drop into the posts/ folder is automatically added to the sidebar list!*

How it Works (Visualizing the Build)

  • Collections: 11ty scans your files for the tag post and creates an array called collections.post.
  • The Loop: The {% for post in collections.post %} code in your layout loops through that array and generates a link for each one.
  • The CSS: Flexbox ensures the list stays on the right while your main content stays on the left.

Would you like me to show you how to add a "date" to those posts so they appear in order?